<template>
  <div class="example">
    <p>pageRouter: #/vuexTest/modules</p>
    123
    <div class="smallexample">
      <p>moduleA: a模块有 namespaced: true</p>
      <p>moduleB: b模块没有 namespaced: true或者设置为false</p>
    </div>

    <div class="example">
      <p class="text-success">全局中的一些</p>
      <ul>
        <li>global state <strong>logined:</strong>: {{ globalState }}</li>
        <li>
          modulesA state <strong>isVip2: </strong> {{ $store.state.isVip2 }}
          <button @click="$store.commit('UPDATE_TO_VIP2')">
            触发全局中的mutation
          </button>
        </li>
        <br />
        <li>
          - 我们触发了全局中的mutation的UPDATE_TO_VIP2方法修改全局中的isVip2属性
        </li>
        <li>
          -
          我们有一个模块moduleB没有设置namespace属性为true,而且也有属性isVip2和mutation的UPDATE_TO_VIP2方法,
          我们通过按钮触发了这个mutation $store.commit('UPDATE_TO_VIP2')
          导致全局和模块B中的isVip2属性都变了.
        </li>
      </ul>
    </div>

    <div class="example">
      <p class="text-success">module A中的</p>
      <ul>
        <li>modulesA state <strong>isVip1: </strong> {{ moduleAState }}</li>
      </ul>
    </div>

    <div class="example">
      <p class="text-success">module B中的</p>
      <ul>
        <li>modulesB state <strong>isVip2: </strong> {{ moduleBState }}</li>
      </ul>
    </div>

    <div class="example">
      <p class="point mt-1">知识点</p>
      <a
        href="https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"
        >命名空间</a
      >
      <pre>
默认情况下，模块内部的 action 和 mutation仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或mutation 作出响应。
Getter同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。

必须注意，不要在不同的、无命名空间的模块中定义两个相同的getter 从而导致错误。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
      </pre>
    </div>
  </div>
</template>
<script>
export default {
  name: 'vuexModuleTest',
  components: {},
  data() {
    return {}
  },
  created() {
    console.log(this.$store.state)
    setTimeout(() => {
      this.$store.commit('UPDATE_LOGIN_STATUS') // 改的是全局模块的
    }, 1000)
    setTimeout(() => {
      // this.$store.commit('UPDATE_TO_VIP1') // 改的是模块A的(错误)
      this.$store.commit('moduleA/UPDATE_TO_VIP1') // 改的是模块A的(正确)

      this.$store.commit('UPDATE_TO_VIP2') // 改的是全局的vip2 但是(正确)
    }, 2000)
    setTimeout(() => {
      this.$store.dispatch('changeVip1') // 改的是模块A的(错误)
    }, 3000)
  },
  methods: {},
  activated: {},
  deactivated: {},
  computed: {
    globalState() {
      return this.$store.state.logined
    },
    moduleAState() {
      return this.$store.state.moduleA.isVip1
    },
    moduleBState() {
      return this.$store.state.moduleB.isVip2
    }
  }
}
</script>
<style lang="less" scoped></style>
